import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_application_1/components/avatar_role_name.dart';
import 'package:flutter_application_1/components/comment_like_read.dart';
import 'package:flutter_application_1/config/app_colors.dart';
import 'package:flutter_application_1/models/article_model.dart';

import '../utils/utils.dart';

const double spaceSize = 20;

class ArticleCart extends StatefulWidget {
  final ArticleItem articleItem;
  const ArticleCart({Key? key, required this.articleItem}) : super(key: key);

  @override
  _ArticleCartState createState() => _ArticleCartState();
}

class _ArticleCartState extends State<ArticleCart> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _title(),
          SizedBox(height: 10),
          _getCover(),
          SizedBox(height: 10),
          _bottom(),
        ],
      ),
    );
  }

  Widget _getCover() {
    switch (widget.articleItem.coverUrlList.length) {
      case 2:
        return _cover2();
      case 3:
        return _cover3();
      case 4:
        return _cover4();
      default:
        return _cover1();
    }
  }

  Widget _cover1() {
    return Center(
      child: _cover(0),
    );
  }

  Widget _cover2() {
    var _random = Random().nextInt(2).floor();
    if (_random == 0) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: MediaQuery.of(context).size.width / 2 - spaceSize,
            height:
                (MediaQuery.of(context).size.width / 2 - spaceSize) * 16 / 9,
            child: _cover(0),
          ),
          Container(
            width: MediaQuery.of(context).size.width / 2 - spaceSize,
            height:
                (MediaQuery.of(context).size.width / 2 - spaceSize) * 16 / 9,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: _cover(1),
            ),
          ),
        ],
      );
    } else {
      return Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            height: (MediaQuery.of(context).size.width) * 9 / 16,
            width: MediaQuery.of(context).size.width,
            child: _cover(0),
          ),
          Container(
            height: (MediaQuery.of(context).size.width) * 9 / 16,
            width: MediaQuery.of(context).size.width,
            child: _cover(1),
          ),
        ],
      );
    }
  }

  Widget _cover3() {
    var _random = Random().nextInt(3).floor();
    switch (_random) {
      case 0:
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              width: MediaQuery.of(context).size.width / 2 - spaceSize,
              height:
                  (MediaQuery.of(context).size.width / 2 - spaceSize) * 16 / 9,
              child: _cover(0),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: ((MediaQuery.of(context).size.width / 2 - spaceSize) *
                              16 /
                              9) /
                          2 -
                      spaceSize / 8,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(1),
                ),
                SizedBox(height: spaceSize * 0.25),
                Container(
                  height: ((MediaQuery.of(context).size.width / 2 - spaceSize) *
                              16 /
                              9) /
                          2 -
                      spaceSize / 8,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(2),
                ),
              ],
            ),
          ],
        );
      case 1:
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: ((MediaQuery.of(context).size.width / 2 - spaceSize) *
                              16 /
                              9) /
                          2 -
                      spaceSize / 8,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(0),
                ),
                SizedBox(height: spaceSize * 0.25),
                Container(
                  height: ((MediaQuery.of(context).size.width / 2 - spaceSize) *
                              16 /
                              9) /
                          2 -
                      spaceSize / 8,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(1),
                ),
              ],
            ),
            Container(
              width: MediaQuery.of(context).size.width / 2 - spaceSize,
              height:
                  (MediaQuery.of(context).size.width / 2 - spaceSize) * 16 / 9,
              child: _cover(2),
            ),
          ],
        );
      case 2:
        return Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: (MediaQuery.of(context).size.width) * 9 / 16,
              width: MediaQuery.of(context).size.width,
              child: _cover(0),
            ),
            SizedBox(
              height: spaceSize / 2,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height:
                      (MediaQuery.of(context).size.width) * 9 / 16 - spaceSize,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(1),
                ),
                SizedBox(height: spaceSize * 0.25),
                Container(
                  height:
                      (MediaQuery.of(context).size.width) * 9 / 16 - spaceSize,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(2),
                ),
              ],
            ),
          ],
        );
      default:
        return Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height:
                      (MediaQuery.of(context).size.width) * 9 / 16 - spaceSize,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(0),
                ),
                SizedBox(height: spaceSize * 0.25),
                Container(
                  height:
                      (MediaQuery.of(context).size.width) * 9 / 16 - spaceSize,
                  width: MediaQuery.of(context).size.width / 2 - spaceSize,
                  child: _cover(1),
                ),
              ],
            ),
            SizedBox(
              height: spaceSize / 2,
            ),
            Container(
              height: (MediaQuery.of(context).size.width) * 9 / 16,
              width: MediaQuery.of(context).size.width,
              child: _cover(2),
            ),
          ],
        );
    }
  }

  Widget _cover4() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: MediaQuery.of(context).size.width / 2 - spaceSize,
              width: MediaQuery.of(context).size.width / 2 - spaceSize,
              child: _cover(0),
            ),
            Container(
              height: MediaQuery.of(context).size.width / 2 - spaceSize,
              width: MediaQuery.of(context).size.width / 2 - spaceSize,
              child: _cover(1),
            ),
          ],
        ),
        SizedBox(
          height: 6,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: MediaQuery.of(context).size.width / 2 - spaceSize,
              width: MediaQuery.of(context).size.width / 2 - spaceSize,
              child: _cover(2),
            ),
            Container(
              height: MediaQuery.of(context).size.width / 2 - spaceSize,
              width: MediaQuery.of(context).size.width / 2 - spaceSize,
              child: _cover(3),
            ),
          ],
        ),
      ],
    );
  }

  Widget _title() {
    return Text(
      widget.articleItem.title,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        color: AppColors.unactive,
        fontSize: 16,
      ),
    );
  }

  Widget _cover(index) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: FadeInImage.assetNetwork(
        placeholder: "assets/images/common/lazy-1.png",
        image: changeImageUrl(widget.articleItem.coverUrlList[index]),
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _bottom() {
    return Row(
      children: [
        Expanded(
          child: AvatarRoleName(
            coverPictureUrl: widget.articleItem.user.coverPictureUrl,
            nickname:
                widget.articleItem.user.nickname + "1111111111111111111111",
            type: widget.articleItem.user.type,
          ),
        ),
        Expanded(
          child: CommentLikeRead(
            commentCount: widget.articleItem.commentCount,
            thumbUpCount: widget.articleItem.thumbUpCount,
            readCount: widget.articleItem.readCount,
          ),
        ),
      ],
    );
  }
}
